<!DOCTYPE html>
<html lang="zh-cn" itemscope itemtype="http://schema.org/WebPage">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Image Preview - Tonser&#39;s blog</title>
  

<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta name="MobileOptimized" content="width"/>
<meta name="HandheldFriendly" content="true"/>


<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">

<meta name="mobile-web-app-capable" content="yes">

<meta name="author" content="Tonser" />
  <meta name="description" content="Thanks for liwenyip/hugo-easy-gallery &amp;amp; Zebradil · Pull Request #48 .
Now, we could use {{&amp;lt; gallery &amp;gt;}} shortcode in hugo-theme-jane.
Normal Image This is an image in static/image folder.
1  ![This is an image in `static/image` folder.](/image/example.jpg)   
" />

  <meta name="keywords" content="Tonser, blog, jane" />






<meta name="generator" content="Hugo 0.47.1" />


<link rel="canonical" href="https://sundxfansky.github.io/post/image-preview/" />



<link rel="icon" href="/favicon.ico" />










<link href="/dist/jane.min.css?v=2.7.0" rel="stylesheet">




<meta property="og:title" content="Image Preview" />
<meta property="og:description" content="Thanks for liwenyip/hugo-easy-gallery &amp; Zebradil · Pull Request #48 .

Now, we could use {{&lt; gallery &gt;}} shortcode in hugo-theme-jane.

Normal Image

This is an image in static/image folder.


1


![This is an image in `static/image` folder.](/image/example.jpg)


" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://sundxfansky.github.io/post/image-preview/" /><meta property="article:published_time" content="2018-03-03T16:01:23&#43;08:00"/>
<meta property="article:modified_time" content="2018-03-04T16:01:23&#43;08:00"/>
<meta itemprop="name" content="Image Preview">
<meta itemprop="description" content="Thanks for liwenyip/hugo-easy-gallery &amp; Zebradil · Pull Request #48 .

Now, we could use {{&lt; gallery &gt;}} shortcode in hugo-theme-jane.

Normal Image

This is an image in static/image folder.


1


![This is an image in `static/image` folder.](/image/example.jpg)


">


<meta itemprop="datePublished" content="2018-03-03T16:01:23&#43;08:00" />
<meta itemprop="dateModified" content="2018-03-03T16:01:23&#43;08:00" />
<meta itemprop="wordCount" content="536">



<meta itemprop="keywords" content="preview,image,shortcodes,tag-7," />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Image Preview"/>
<meta name="twitter:description" content="Thanks for liwenyip/hugo-easy-gallery &amp; Zebradil · Pull Request #48 .

Now, we could use {{&lt; gallery &gt;}} shortcode in hugo-theme-jane.

Normal Image

This is an image in static/image folder.


1


![This is an image in `static/image` folder.](/image/example.jpg)


"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->




</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/" class="logo">细嗅蔷薇</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/">主页</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/post/">文章</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/tags/">标签</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/categories/">分类</a>
          
        
      </li><li class="mobile-menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/about/">关于</a>
          
        
      </li>
    
  </ul>
</nav>


  
    






  <link rel="stylesheet" href="/lib/photoswipe/photoswipe.min.css" />
  <link rel="stylesheet" href="/lib/photoswipe/default-skin/default-skin.min.css" />




<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

<div class="pswp__bg"></div>

<div class="pswp__scroll-wrap">
    
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    
    <div class="pswp__ui pswp__ui--hidden">
    <div class="pswp__top-bar">
      
      <div class="pswp__counter"></div>
      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
      <button class="pswp__button pswp__button--share" title="Share"></button>
      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
      
      
      <div class="pswp__preloader">
        <div class="pswp__preloader__icn">
          <div class="pswp__preloader__cut">
            <div class="pswp__preloader__donut"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
      <div class="pswp__share-tooltip"></div>
    </div>
    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
    </button>
    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
    </button>
    <div class="pswp__caption">
      <div class="pswp__caption__center"></div>
    </div>
    </div>
    </div>
</div>

  

  

  <header id="header" class="header container">
    <div class="logo-wrapper">
  <a href="/" class="logo">
    
      细嗅蔷薇
    
  </a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/">主页</a>
          

        

      </li>
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/post/">文章</a>
          

        

      </li>
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/tags/">标签</a>
          

        

      </li>
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/categories/">分类</a>
          

        

      </li>
    
      <li class="menu-item">
        
          
          
            <a class="menu-item-link" href="https://sundxfansky.github.io/about/">关于</a>
          

        

      </li>
    
    
  </ul>
</nav>

  </header>

  <div id="mobile-panel">
    <main id="main" class="main bg-llight">
      <div class="content-wrapper">
        <div id="content" class="content container">
          <article class="post bg-white">
    
    <header class="post-header">
      <h1 class="post-title">Image Preview</h1>
      
      <div class="post-meta">
        <span class="post-time"> 2018-03-03 </span>
        <div class="post-category">
            <a href="https://sundxfansky.github.io/categories/docs/"> docs </a>
            <a href="https://sundxfansky.github.io/categories/shortcodes/"> shortcodes </a>
            <a href="https://sundxfansky.github.io/categories/index/"> index </a>
            
          </div>
        <span class="more-meta"> 约 536 字 </span>
          <span class="more-meta"> 预计阅读 3 分钟 </span>

        
        
          <span id="busuanzi_container_page_pv">
            | 阅读 <span id="busuanzi_value_page_pv"></span>
          </span>
        

        
        
      </div>
    </header>

    
    
<div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content">
    <nav id="TableOfContents">
<ul>
<li>
<ul>
<li><a href="#normal-image">Normal Image</a></li>
<li><a href="#figure-shortcode"><code>{{&lt; figure &gt;}}</code> shortcode</a>
<ul>
<li><a href="#figure-image-with-title">figure image with title</a></li>
<li><a href="#figure-image-with-caption">figure image with caption</a></li>
<li><a href="#more-figure-shortcode-usage">more <code>{{&lt; figure &gt;}}</code> shortcode usage</a></li>
</ul></li>
<li><a href="#gallery-shortcode"><code>{{&lt; gallery &gt;}}</code> shortcode</a>
<ul>
<li><a href="#simple-gallery">simple gallery</a></li>
<li><a href="#to-specify-individual-image-files">To specify individual image files</a></li>
</ul></li>
</ul></li>
</ul>
</nav>
  </div>
</div>

    
    <div class="post-content">
      <p>Thanks for <a href="https://github.com/liwenyip/hugo-easy-gallery">liwenyip/hugo-easy-gallery</a> &amp; <a href="https://github.com/xianmin/hugo-theme-jane/pull/48">Zebradil · Pull Request #48</a> .</p>

<p>Now, we could use <code>{{&lt; gallery &gt;}}</code> shortcode in hugo-theme-jane.</p>

<h2 id="normal-image">Normal Image</h2>

<p>This is an image in <code>static/image</code> folder.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown"><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-markdown" data-lang="markdown">![<span class="nt">This is an image in `static/image` folder.</span>](<span class="na">/image/example.jpg</span>)</code></pre></td></tr></table>
</div>
</div>
<p></p>

<h2 id="figure-shortcode"><code>{{&lt; figure &gt;}}</code> shortcode</h2>

<h3 id="figure-image-with-title">figure image with title</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{&lt; figure src=&#34;/image/example.jpg&#34; title=&#34;figure image with title&#34; &gt;}}</pre></td></tr></table>
</div>
</div>
<h3 id="figure-image-with-caption">figure image with caption</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{&lt; figure src=&#34;/image/example.jpg&#34; caption=&#34;figure image with caption figure image with caption figure image with caption figure image with caption figure image with caption&#34; &gt;}}</pre></td></tr></table>
</div>
</div>
<h3 id="more-figure-shortcode-usage">more <code>{{&lt; figure &gt;}}</code> shortcode usage</h3>

<p>Specifying your image files:</p>

<ul>
<li><code>{{&lt; figure src=&quot;thumb.jpg&quot; link=&quot;image.jpg&quot; &gt;}}</code> will use <code>thumb.jpg</code> for thumbnail and <code>image.jpg</code> for lightbox</li>
<li><code>{{&lt; figure src=&quot;image.jpg&quot; &gt;}}</code> or <code>{{&lt; figure link=&quot;image.jpg&quot; &gt;}}</code> will use <code>image.jpg</code> for both thumbnail and lightbox</li>
<li><code>{{&lt; figure link=&quot;image.jpg&quot; thumb=&quot;-small&quot; &gt;}}</code> will use <code>image-small.jpg</code> for thumbnail and <code>image.jpg</code> for lightbox</li>
</ul>

<p>Optional parameters:</p>

<ul>
<li>All the <a href="https://gohugo.io/extras/shortcodes">features/parameters</a> of Hugo&rsquo;s built-in <code>figure</code> shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt</li>
<li><code>size</code> (e.g. <code>size=&quot;1024x768&quot;</code>) pre-defines the image size for PhotoSwipe. Use this option if you don&rsquo;t want to pre-load the linked image to determine its size.</li>
<li><code>class</code> allows you to set any custom classes you want on the <code>&lt;figure&gt;</code> tag.</li>
</ul>

<p>Optional parameters for standalone <code>{{&lt; figure &gt;}}</code> shortcodes only (i.e. don&rsquo;t use on <code>{{&lt; figure &gt;}}</code> inside <code>{{&lt; gallery &gt;}}</code> - strange things may happen if you do):</p>

<ul>
<li><code>caption-position</code> and <code>caption-effect</code> work the same as for the <code>{{&lt; gallery &gt;}}</code> shortcode (see below).</li>
<li><code>width</code> defines the <a href="https://www.w3schools.com/cssref/pr_dim_max-width.asp"><code>max-width</code></a> of the image displayed on the page. If using a thumbnail for a standalone figure, set this equal to your thumbnail&rsquo;s native width to make the captions behave properly (or feel free to come up with a better solution and submit a pull request :-)). Also use this option if you don&rsquo;t have a thumbnail and you don&rsquo;t want the hi-res image to take up the entire width of the screen/container.</li>
<li><code>class=&quot;no-photoswipe&quot;</code> prevents a <code>&lt;figure&gt;</code> from being loaded into PhotoSwipe. If you click on the figure you&rsquo;ll instead a good ol&rsquo; fashioned hyperlink to a bigger image (or - if you haven&rsquo;t specified a bigger image - the same one).</li>
</ul>

<h2 id="gallery-shortcode"><code>{{&lt; gallery &gt;}}</code> shortcode</h2>

<h3 id="simple-gallery">simple gallery</h3>

<p>To specify a directory of image files:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{&lt; gallery dir=&#34;/img/your-directory-of-images/&#34; &gt;}}</pre></td></tr></table>
</div>
</div>
<ul>
<li>The images are automatically captioned with the file name.</li>
<li><code>[image].jpg</code> is used for the hi-res image, and <code>[image]-thumb.jpg</code> is used for the thumbnails.</li>
<li>If <code>[image]-thumb.jpg</code> doesn&rsquo;t exist, then <code>[image].jpg</code> will be used for both hi-res and thumbnail images.</li>
<li>The default thumbnail suffix is <code>-thumb</code>, but you can specify a different one e.g. <code>thumb=&quot;-small&quot;</code> or <code>thumb=&quot;_150x150&quot;</code>.</li>
</ul>

<h3 id="to-specify-individual-image-files">To specify individual image files</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></pre></td>
<td class="lntd">
<pre class="chroma">{{&lt; gallery &gt;}}
  {{&lt; figure src=&#34;image1.jpg&#34; &gt;}}
  {{&lt; figure src=&#34;image2.jpg&#34; &gt;}}
  {{&lt; figure src=&#34;image3.jpg&#34; &gt;}}
{{&lt; /gallery &gt;}}</pre></td></tr></table>
</div>
</div>
<p><strong>Optional parameters:</strong></p>

<ul>
<li><code>caption-position</code> - determines the captions&rsquo; position over the image. Options:

<ul>
<li><code>bottom</code> (default)</li>
<li><code>center</code></li>
<li><code>none</code> hides captions on the page (they will only show in PhotoSwipe)</li>
</ul></li>
<li><code>caption-effect</code> - determines if/how captions appear upon hover. Options:

<ul>
<li><code>slide</code> (default)</li>
<li><code>fade</code></li>
<li><code>none</code> (captions always visible)</li>
</ul></li>
<li><code>hover-effect</code> - determines if/how images change upon hover. Options:

<ul>
<li><code>zoom</code> (default)</li>
<li><code>grow</code></li>
<li><code>shrink</code></li>
<li><code>slideup</code></li>
<li><code>slidedown</code></li>
<li><code>none</code></li>
</ul></li>
<li><code>hover-transition</code> - determines if/how images change upon hover. Options:

<ul>
<li>not set - smooth transition (default)</li>
<li><code>none</code> - hard transition</li>
</ul></li>
</ul>
    </div>

    
    
<div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">Tonser</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">2018-03-04</span>
  </p>
  
  <p class="copyright-item">
    <span class="item-title">许可协议</span>
    <span class="item-content"><a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a></span>
  </p>
</div>

    
    

    <footer class="post-footer">
      <div class="post-tags">
          <a href="https://sundxfansky.github.io/tags/preview/">preview</a>
          <a href="https://sundxfansky.github.io/tags/image/">image</a>
          <a href="https://sundxfansky.github.io/tags/shortcodes/">shortcodes</a>
          <a href="https://sundxfansky.github.io/tags/tag-7/">tag-7</a>
          
        </div>

      
      <nav class="post-nav">
        
          <a class="prev" href="/post/shortcodes-preview/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">Shortcodes Preview</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        
          <a class="next" href="/post/shortcode-notice/">
            <span class="next-text nav-default">Shortcodes Notice Preview</span>
            <span class="prev-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>

  
  

  
  
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "sundxfansky/comments_blog"
            issue-term="pathname"
            crossorigin="anonymous"
            async>
      </script>
    </div>
  

  

  

  

        </div>
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:sundxfansky@sjtu.edu.cn" rel="me noopener" class="iconfont icon-email"
        title="email" target="_blank">
      </a>
      <a href="https://github.com/sundxfansky" rel="me noopener" class="iconfont icon-github"
        title="github" target="_blank">
      </a>
  <a href="https://sundxfansky.github.io/index.xml" rel="noopener alternate" type="application/rss&#43;xml" class="iconfont icon-rss"
    title="rss" target="_blank">
  </a>
  </div>

<div class="copyright">
  <span class="power-by">
    Powered by <a class="hexo-link" href="https://gohugo.io">Hugo</a>
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    Theme - <a class="theme-link" href="https://github.com/xianmin/hugo-theme-jane">Jane</a>
  </span>

  <span class="copyright-year">
    &copy;
    
      2017 -
    2018
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span><span class="author">
        Tonser
        
      </span></span>

  
  
    <span id="busuanzi_container">
      访客数/访问量：<span id="busuanzi_value_site_uv"></span>/<span id="busuanzi_value_site_pv"></span>
    </span>
  
</div>

    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
<script type="text/javascript" src="/lib/jquery/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="/lib/slideout/slideout-1.0.1.min.js"></script>
<script type="text/javascript" src="/dist/jane.min.js?v=2.7.0"></script>





  
    <script type="text/javascript" src="/js/load-photoswipe.js"></script>
    <script type="text/javascript" src="/lib/photoswipe/photoswipe.min.js"></script>
    <script type="text/javascript" src="/lib/photoswipe/photoswipe-ui-default.min.js"></script>
  




  <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>








</body>
</html>
